<template >


  <el-select v-model="Search_Select" placeholder="请选择" slot="prepend" >
    <el-option label="职位名称" value="job_name"></el-option>
    <el-option label="工作地点" value="working_area"></el-option>
    <el-option label="职位类型" value="job_type"></el-option>
  </el-select>
  <el-input  placeholder="请输入关键字" icon="search"  class="search"  v-model="Search_Input" style="width:200px"></el-input>
  <el-button type="primary" style="width: 80px;margin-bottom: 20px;" @click="search_do">搜索</el-button>

  <el-table
    :data="showCrud"
    style="width: 100%;font-family: arial,verdana,helvetica,'PingFang SC','HanHei SC',STHeitiSC-Light,Microsoft Yahei,sans-serif;"
    class="job-table-style"
  >

    <el-table-column
      label="职位名称"
      prop="job_name"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.job_name }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="工作地点"
      prop="working_area"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.working_area }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="岗位类型"
      prop="job_type"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.job_type }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="标签"
      prop="tap_infos"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.tap_infos }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="发布日期"
      prop="release_date"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.release_date }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="结束日期"
      prop="end_date"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.end_date }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="审核状态"
      prop="job_infor_examine"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.job_infor_examine }}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          size="mini"
          @click="handleEditJob(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDeleteJob(scope.$index, scope.row)">删除</el-button>
        <el-button
          v-if="scope.row.job_infor_examine !== '已审核'"
          size="mini"
          type="primary"
          style="width: 66px;"
          @click="handleExamineJob(scope.$index, scope.row)">审 核</el-button>
        <el-button
          v-if="scope.row.job_infor_examine === '已审核'"
          size="mini"
          type="info"
          disabled
          @click="handleExamineJob(scope.$index, scope.row)">已审核</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--    表格数据过多时,采用的分页-->
  <el-pagination
    background
    @current-change="handleCurrentChange"
    :current-page.sync="currentPage"
    :page-size="Page_Size"
    layout="prev, pager, next"
    :total="Page_Total"
    style="padding-top: 20px;padding-left: 1200px;">
  </el-pagination>

<!--  <el-button type="primary" style="float: left;width: 80px;margin-top: 10px;" @click="handleAddJob()">添加</el-button>-->


<!--  &lt;!&ndash;  添加，弹框&ndash;&gt;-->

<!--  <el-dialog title="职位信息" v-model="addDialogFormVisible" >-->
<!--    <el-form :model="job_form" ref="job_form">-->
<!--      <el-form-item label="职位名称" prop="job_name">-->
<!--        <el-input v-model="job_form.job_name"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="职位类别" prop="job_type">-->
<!--        <el-input v-model="job_form.job_type"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="招聘人数" prop="number_people">-->
<!--        <el-input v-model="job_form.number_people"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="要求专业" prop="profession_require">-->
<!--        <el-input v-model="job_form.profession_require"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="要求学历" prop="education_require">-->
<!--        <el-input  v-model="job_form.education_require"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="工作地区" prop="working_area">-->
<!--        <el-input v-model="job_form.working_area"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="薪酬范围" prop="salary_range">-->
<!--        <el-input v-model="job_form.salary_range"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="外语要求" prop="language_require">-->
<!--        <el-input v-model="job_form.language_require"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="计算机要求" prop="computer_require">-->
<!--        <el-input v-model="job_form.computer_require"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="其他要求" prop="other_require">-->
<!--        <el-input v-model="job_form.other_require"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="简历投递邮箱" prop="resume_email">-->
<!--        <el-input v-model="job_form.resume_email"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="职位描述" prop="job_description">-->
<!--        <el-input v-model="job_form.job_description"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="发布日期" prop="release_date">-->
<!--        <el-input v-model="job_form.release_date"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="截至日期" prop="end_date">-->
<!--        <el-input v-model="job_form.end_date"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="审核状态" prop="job_infor_examine">-->
<!--      <el-input v-model="job_form.job_infor_examine"></el-input>-->
<!--    </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button @click="addDialogFormVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="addHandleJob('job_form',job_form)">确定添加</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--  </el-dialog>-->


  <!--  编辑，弹框-->

  <el-dialog title="职位信息" v-model="editDialogFormVisible" >
    <el-form :model="job_edit_form" ref="job_edit_form" :rules="editRule">
      <el-form-item label="职位名称" prop="job_name">
        <el-input v-model="job_edit_form.job_name"></el-input>
      </el-form-item>
      <el-form-item label="职位类别" prop="job_type">
        <el-select v-model="job_edit_form.job_type" placeholder="请选择职位类型">
          <el-option label="全职" value="全职"></el-option>
          <el-option label="实习" value="实习"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="招聘人数" prop="number_people">
        <el-input-number v-model="job_edit_form.number_people"></el-input-number>
      </el-form-item>
      <el-form-item label="发布日期" prop="release_date">
        <el-date-picker
          v-model="job_edit_form.release_date"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="截至日期" prop="end_date">
        <el-date-picker
          v-model="job_edit_form.end_date"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="要求专业" prop="profession_require">
        <el-input v-model="job_edit_form.profession_require"></el-input>
      </el-form-item>
      <el-form-item label="要求学历" prop="education_require">
        <el-input  v-model="job_edit_form.education_require"></el-input>
      </el-form-item>
      <el-form-item label="工作地区" prop="working_area">
        <el-input v-model="job_edit_form.working_area"></el-input>
      </el-form-item>
      <el-form-item label="薪酬范围" prop="salary_range">
        <el-input v-model="job_edit_form.salary_range"></el-input>
      </el-form-item>
      <el-form-item label="外语要求" prop="language_require">
        <el-input v-model="job_edit_form.language_require"></el-input>
      </el-form-item>
      <el-form-item label="计算机要求" prop="computer_require">
        <el-input v-model="job_edit_form.computer_require"></el-input>
      </el-form-item>
      <el-form-item label="其他要求" prop="other_require">
        <el-input v-model="job_edit_form.other_require"></el-input>
      </el-form-item>
      <el-form-item label="简历投递邮箱" prop="resume_email">
        <el-input v-model="job_edit_form.resume_email"></el-input>
      </el-form-item>
      <el-form-item label="职位描述" prop="job_description">
        <el-input v-model="job_edit_form.job_description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancelEdit()">取消</el-button>
        <el-button type="primary" @click="editHandleJob('job_edit_form',job_edit_form)">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--  审核弹框-->
  <el-dialog title="请选择审核状态" v-model="examineDialogFormVisible" >
    <el-form :model="job_form" ref="job_form">
      <el-form-item label="职位信息审核" prop="job_infor_examine">
        <el-radio v-model="job_form.job_infor_examine" label="待审核">审核不通过</el-radio>
        <el-radio v-model="job_form.job_infor_examine" label="已审核">审核通过</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button @click="examineDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="examineHandleJob('job_form',job_form)">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name:"jobTable",
  data() {
    return {
      editRule:{
        job_name:[
          { required: true, message: "请输入职位名称",
            trigger: "blur"
          },
        ]
      },
      job_edit_form:{},


      crud:[],
      job_form:{},  //职位临时数据
      addDialogFormVisible:false,
      editDialogFormVisible:false,
      examineDialogFormVisible:false,
      Search_Input:"",
      Search_Select:"",

      //分页数据
      Page_Size: 7,
      currentPage: 1,
      Page_Total: 3,
      showCrud:[],
      tapsId:'',
    }
  },
  methods: {
    findAll(){
      let _this=this
      axios.get('http://localhost:8080/getComJobInfo_and_taps')
        .then (function (response) {
          //_this.crud=response.data;
          for(let i in response.data){
            if(response.data[i].job_infor_examine === '待审核'){
              _this.crud.push(response.data[i])
            }
          }
          for(let i in response.data){
            if(response.data[i].job_infor_examine === '已审核'){
              _this.crud.push(response.data[i])
            }
          }
          _this.showCrud=_this.crud.slice(0,_this.Page_Size);
          _this.Page_Total=_this.crud.length
          console.log(response.data)

          console.log(_this.crud[_this.crud.length-1].job_infor_id)
          _this.tapsId= _this.crud[_this.crud.length-1].job_infor_id+1
          console.log(_this.tapsId)

        })
        .catch(function (error) {
          console.log(error);
        });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.showCrud = this.crud.slice((val - 1) * this.Page_Size, val * this.Page_Size);

    },
    search_do(){
      let select = this.Search_Select
      if(!select){
        this.warning()
      }
      if (this.Search_Input === "") {
        this.showCrud = this.crud.slice(0, this.Page_Size);
        this.Page_Total = this.crud.length
        this.currentChangePage(this.crud)
        return;
      }
//每次手动将数据置空,因为会出现多次点击搜索情况
      this.Shop_Data_End = []
      // eslint-disable-next-line no-unused-vars
      this.crud.forEach((value,index,array) => {
        let temp = ''

        if (select === 'job_name') {
          temp = value.job_name
        }
        if (select === 'working_area') {
          temp = value.working_area
        }
        if (select === 'job_type') {
          temp = value.job_type
        }
        console.log(this.Search_Input)
        if (temp!=='') {
          if (temp.indexOf(this.Search_Input)>=0) {
            this.Shop_Data_End.push(value)
          }
        }
      });
//页面数据改变重新统计数据数量和当前页
      this.currentPage = 1
      this.Page_Total = this.Shop_Data_End.length
//渲染表格,根据值
      this.currentChangePage(this.Shop_Data_End)
//页面初始化数据需要判断是否检索过
      this.Search_flag = true
    },
    currentChangePage(list) {
      let from = (this.currentPage - 1) * this.Page_Size;
      let to = this.currentPage * this.Page_Size;
      this.showCrud = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.showCrud.push(list[from]);
        }
      }
    },
    warning() {
      this.$message({
        message: '请选择搜索标签！',
        type: 'warning'
      });
    },

    //删除职位
    handleDeleteJob(index,row) {
      let _this=this
      _this.$confirm('此操作将永久删除职位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        console.log(_this.tapsId)
        axios.post('http://localhost:8080/deleteComTap',_this.tapsId)

        axios.post('http://localhost:8080/deleteJob_infor',row)
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });


        _this.$router.go(0)
        _this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // addJob_infor
    //添加职位信息
    // handleAddJob(){
    //   this.job_form={}
    //   this.addDialogFormVisible=true
    // },
    // addHandleJob(formName,formData){
    //   let _this=this;
    //   axios.post('http://localhost:8080/addJob_infor',formData)
    //     .then(function (response) {
    //       console.log(response);
    //     })
    //     .catch(function (error) {
    //       console.log(error);
    //     });
    //   console.log(formData)
    //   _this.addDialogFormVisible=false
    //   _this.$router.go(0)
    //
    // },

    //编辑职位信息
    cancelEdit() {
      this.editDialogFormVisible=false
    },

    handleEditJob(index,row){
      this.job_edit_form = []
      this.job_edit_form= JSON.parse(JSON.stringify(row))
      this.editDialogFormVisible = true
    },
    // eslint-disable-next-line no-unused-vars
    editHandleJob(formName,formData){
      let _this=this;
      // console.log(_this.$refs[formName])
       _this.$refs[formName].validate((valid) => {
        if (valid) {
       axios.post('http://localhost:8080/modifyJob_infor',formData)
            // eslint-disable-next-line no-unused-vars
            .then(function (response) {
              console.log(response.data);
              for(let i=0;i<_this.showCrud.length;i++){
                if(_this.showCrud[i].job_infor_id===formData.job_infor_id){
                  _this.showCrud[i] = JSON.parse(JSON.stringify(formData))
                  console.log(11)
                }
              }

            })
            .catch(function (error) {
              console.log(error);
            });
          this.editDialogFormVisible = false

        } else {
          ElMessage.error('请输入正确格式！')
          console.log('error submit!!');
          return false;
        }
      });
    },

    //审核职位信息
    handleExamineJob(index,row){
      this.job_form = []
      this.job_form = row
      this.examineDialogFormVisible = true
    },
    // eslint-disable-next-line no-unused-vars
    examineHandleJob(formName,formData){
      let _this=this;
      // console.log(_this.$refs[formName])
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('http://localhost:8080/modifyJob_infor',formData)
            // eslint-disable-next-line no-unused-vars
            .then(function (response) {
              console.log(response.data);
              _this.$router.go(0)

            })
            .catch(function (error) {
              console.log(error);
            });
          this.examineDialogFormVisible = false

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },


  },

  created(){
    this.findAll()
  },

}
</script>
<style>

.job-table-style{
  box-shadow:5px 5px 5px 5px #c1c1c1;
}


</style>
